<template>
  <div class="fallow">
    <div class="fallowBox">
      <h1 class="regionalTitle">瑟语的休闲生活</h1>
      <div class="scrollbar">
        <div class="fallowItemBox">
          <div
              v-inter:inter
              v-for="item in fallowList"
              :key="item.id"
              class="fallowItem"
              @click="showDetail(item)"
          >
            <img :src="item.logo" alt="" class="logo">
            <div class="fallowItemContent">
              <h2>{{item.name}}</h2>
              <div v-for="(msg,index) in item.message" :key="index">{{msg}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FallowDetail ref="fallowDialog"/>
  </div>
</template>

<script setup>
import {ref, reactive, onBeforeMount} from "vue";
import {http} from "../axios/index.js";
import FallowDetail from "./FallowDetail.vue"

//休闲列表
const fallowList = reactive([])
//获取休闲列表
async function getFallow(){
  const res = await http({url: "/get_fallow"})
  if(res.data.code === 0){
    Object.freeze(res.data.data.fallowList)
    fallowList.push(...res.data.data.fallowList)
  }
}

// 详细信息弹窗组件
const fallowDialog = ref()
// 显示详情
function showDetail(fallowInfo){
  fallowDialog.value.showDialog(fallowInfo)
}

onBeforeMount(()=>{
  getFallow()
})
</script>

<style scoped>
.fallow{
  background: url("/assets/fallow/fallow_bg.png") bottom center;
}
.fallowBox{
  width: 90vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.fallowItemBox{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 20px;
  padding-top: 20px;
}
.fallowItemBox .fallowItem{
  box-shadow: 5px 5px 10px #444444;
  border-radius: 10px;
  padding: 20px;
  backdrop-filter: blur(5px);
  opacity: 0;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.fallowItem .logo{
  width: 7.8125vw;
  min-width: 100px;
  object-fit: contain;
}
.fallowItemBox .fallowItem .fallowItemContent{
  line-height: 1.3;
}
@media (max-width: 800px){
  .fallowItemBox{
    grid-template-columns: repeat(1,1fr);
  }
}
</style>